<template>
  <el-dialog v-if="load" title="税点账期变更记录" v-model="visible" append-to-body :close-on-click-modal="false" :z-index="2000" class="full" width="1200px" @close="handleClose">
    <VTable ref="tableRef" v-bind="tableOptions">
      <template #form="{ form }">
        <VSelect v-model="form.supplier_id" placeholder="供应商" type="supplier" multiple collapse-tags style="min-width: 160px" />
        <VSelect v-model="form.change_type" placeholder="变更类型" :options="options.change_type" multiple collapse-tags style="min-width: 160px" />
        <VCascader v-model="form.create_user_id" placeholder="变更人" multiple collapse-tags filterable clearable style="min-width: 160px" />
        <VGroup>
          <div class="v-group-item">变更时间</div>
          <VDate v-model="form.dateRange.value" />
        </VGroup>
        <VCascader v-model="form.audit_user_id" placeholder="审核人" multiple collapse-tags filterable clearable style="min-width: 160px" />
        <VGroup>
          <div class="v-group-item">审核时间</div>
          <VDate v-model="form.auditRange.value" />
        </VGroup>
      </template>
      <template #toolbar_btns>
        <VExport auth="/purchase/supplier/data/changeLog" name="supplier-change" mainKey="scl_id" :tableRef="tableRef" task class="ml-auto" />
      </template>
    </VTable>
    <template #footer>
      <el-button @click="close">关 闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import api from '../api'
import { ElMessage } from 'element-plus'
import XEUtils from 'xe-utils'
const router = useRouter()

const props = defineProps({
  options: { type: Object, default: () => ({}) },
})
const emit = defineEmits(['close', 'success'])

const load = ref(false)
const visible = ref(false)
let loadings = reactive({})
const tableRef = ref()

router.beforeEach((to, from, next) => {
  close()

  // 确保调用 next() 来解析守卫
  next()
})

// 查询
const query = () => {
  tableRef?.value.query()
}

// 获取月初月末时间
function getMonthStartAndEndTime(year, month) {
  const startDate = new Date(year, month - 1, 1); // 月初日期
  const endDate = new Date(year, month, 0); // 月末日期
  startDate.setHours(0, 0, 0, 0)
  endDate.setHours(23, 59, 59, 0)
  
  return {
    startTime: XEUtils.toDateString(startDate.getTime(), 'yyyy-MM-dd HH:mm:ss'), // 月初时间
    endTime: XEUtils.toDateString(endDate.getTime(), 'yyyy-MM-dd HH:mm:ss') // 月末时间
  };
}

// 使用当前年份和月份
const currentYear = new Date().getFullYear();
const currentMonth = new Date().getMonth() + 1; // JavaScript中月份是从0开始的

const { startTime, endTime } = getMonthStartAndEndTime(currentYear, currentMonth)

// 列表配置
const tableOptions = reactive({
  formConfig: {
    data: {
      dateRange: { type: 'create_time', value: [startTime, endTime], range: true },
      auditRange: { type: 'audit_time', value: [], range: true },
    }
  },
  columns: [
    {title: '供应商名称', field: 'supplier_name', line: 2},
    {title: '供应商ID', field: 'supplier_code', width: 100},
    {title: '变更类型', field: 'change_type_name', width: 80},
    {title: '变更前信息', field: 'change_before', line: 2},
    {title: '变更后信息', field: 'change_after', line: 2},
    {title: '上月下单金额', field: 'last_month_money', width: 100},
    {title: '变更人', field: 'create_user', width: 100, line: 2},
    {title: '变更时间', field: 'create_time', width: 100, line: 2},
    {title: '审核人', field: 'audit_user', width: 100, line: 2},
    {title: '审核时间', field: 'audit_time', width: 100, line: 2},
  ],
  proxyConfig: {
    autoLoad: false,
    ajax: {
      query: ({ page, form }) => api.changeList({ ...form, ...page })
    }
  }
})


// 打开弹窗
const open = async () => {
  if (!load.value) {
    load.value = true
    await 1
  }
  loadings = reactive({})
  visible.value = true
  nextTick(() => {
    tableRef?.value.resetForm()
    query()
  })
}
// 关闭弹窗
const close = () => {
  visible.value = false
}

const handleClose = () => {
  emit('close')
}

defineExpose({ open })
</script>